<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>


</head>
<body>
    
<p>
    我记得刚开始吸引我学JS 的，是一个 点击就出现一个菜单的效果；<br>
    当时我只能用 CSS 的<strong> :hover </strong> 来简单模拟一下， <br>
</p>


<p>现在我们就用 javascript 来做一个下拉菜单</p>

<!-- 先是布局 -->
<div id="menu">
    <button id="btn"> 点击出现菜单 </button>
    <ul id="menuItem" style="display: none">
        <li>Home</li>
        <li>Study</li>
        <li>News</li>
        <li>About</li>
    </ul>
</div>



<script>
    // 首先拿到需要使用的 HTML 元素

    var oBtn = document.getElementById("btn");
    var oUl = document.getElementById( "menuItem" );


    // 给 oBtn 绑定点击事件，
    oBtn.onclick = function(){
        
        //让 Ul 显示出了
        oUl.style.display = "block";
    
    }

    // 后边在来完善一下这个菜单



</script>


</body>
</html>